<template>
  <a-table
    :columns="colField"
    :data-source="lstField"
    bordered
    size="small"
    :pagination="false"
    :row-selection="{
      selectedRowKeys: state.selectedRowKeys,
      onChange: onSelectChange,
      hideSelectAll: true,
      type: multi ? 'checkbox' : 'radio',
    }"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex == 'label'">
        <template v-if="record.required">
          <span style="color: blue">{{ record.label }}</span>
        </template>
        <template v-else>
          {{ record.label }}
        </template>
        <template v-if="record.multi">
          <span> ...</span>
        </template>
      </template>
    </template>
  </a-table>
</template>
<script setup>
import { reactive, onMounted } from "vue";
import CommonDefine from "@/component/CommonDefine";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const appStore = CommonDefine.appStore();
const props = defineProps({
  // 当前模型id
  fields: Array,
  // 是否多选
  multi: Boolean,
  // 是否展示系统私有字段
  showSysField: { type: Boolean, default: false },
});
const emits = defineEmits(["ok"]);
const colField = [
  { title: t("315"), dataIndex: "label" },
  { title: t("316"), dataIndex: "fieldTypeLabel" },
];
const state = reactive({
  selectedRowKeys: [],
});
const onSelectChange = (selectedRowKeys) => {
  state.selectedRowKeys = selectedRowKeys;
  emits("ok", selectedRowKeys);
};

const lstField = reactive([]);
const loadFieldDefine = () => {
  CommonDefine.clearArray(lstField);
  if (props.showSysField) {
    lstField.push({
      key: 0,
      id: 0,
      displayOrder: 0,
      label: t("343"),
      fieldType: 201,
      fieldTypeLabel: t("344"),
    });
    lstField.push({
      key: 1,
      id: 1,
      displayOrder: 0,
      label: t("345"),
      fieldType: 201,
      fieldTypeLabel: t("344"),
    });
    lstField.push({
      key: 2,
      id: 2,
      displayOrder: 0,
      label: t("346"),
      fieldType: 303,
      fieldTypeLabel: t("347"),
    });
  }
  props.fields.forEach((fd) => {
    fd.key = fd.id;
    fd.fieldTypeLabel = appStore.aryFieldType.find(
      (x) => x.key == fd.fieldType.T
    ).label;
    lstField.push(fd);
  });
};

const setSelected = (keys) => {
  state.selectedRowKeys = keys;
};

onMounted(() => {
  loadFieldDefine();
});

defineExpose({ setSelected });
</script>
